<template>
    <div class="index" :style="{backgroundImage: 'url(' + require('@/assets/images/card/pagebg.jpg')+ ')',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%' }">
        <!-- 头部 个人信息 -->
        <div class="mine">
            <div class="head">
                <!-- <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> -->
                <img :src="indexdata.headImgUrl"  alt="">
            </div>
            <div class="sign">
                <div class="top">
                    <span class="t_name">{{indexdata.nickName}}</span>
                    <span class="iconfont iconjinka-huangguan"></span> 
                    <span>新星会员</span>  
                </div>
                <div class="line"></div>
                <div class="bottom">
                    <div class="speed">升级 <span class="sp">成长加速中</span><span class="iconfont iconshangsheng"></span></div>
                    <div class="dj">银卡会员</div>
                </div>
            </div>
        </div>
        <!-- 消费记录  我的礼包  扫一扫 -->
        <div class="i_box">
            <div class="i_card">
                N<span class="sm">o.</span> <span>10{{indexdata.id}}</span>
            </div>
            <div class="list" style="margin:0px 0px;padding-bottom:10px;">
                <div class="item" @click="goNext" data-item="expensesRecord">
                    <div class="icon_box">
                        <div class="iconfont iconxiaofeijilu icon" data-item="expensesRecord"></div>
                    </div>
                    <div class="text" data-item="expensesRecord">消费记录</div>
                </div>
                <div class="item" @click="goNext" data-item="gift">
                    <div class="icon_box">
                        <div class="iconfont iconlibao icon" data-item="gift"></div>
                    </div>
                    <div class="text" data-item="gift">我的礼包</div>
                </div>
                <div class="item" @click="getscanQRCode">
                    <div class="icon_box">
                        <div class="iconfont iconsaoyisao icon"></div>
                    </div>
                    <div class="text">扫一扫</div>
                </div>
            </div>
        </div>
        <div class="line2">
            <img class="l_img" src="@/assets/images/line.png" />
        </div>
        <!-- 个人信息  等级特权   会员权益   酒窖  附近门店  最近活动 -->
        <div class="list circle_list">
            <div class="item" @click="goNext" data-item="account">
                <div class="icon_box">
                    <div class="iconfont iconwode-gerenxinxi icon" data-item="account"></div>
                </div>
                <div class="text" data-item="account">个人信息</div>
            </div>
            <div class="item" @click="goNext" data-item="rank">
                <div class="icon_box">
                    <div class="iconfont icondengji icon" data-item="rank"></div>
                </div>
                <div class="text" data-item="rank">等级特权</div>
            </div>
            <div class="item" @click="goNext" data-item="membershipInterests">
                <div class="icon_box">
                    <div class="iconfont iconhuiyuan icon" data-item="membershipInterests"></div>
                </div>
                <div class="text" data-item="membershipInterests">会员权益</div>
            </div>
        </div>
        <div class="list circle_list">
            <div class="item" @click="goNext" data-item="wine">
                <div class="icon_box">
                    <div class="iconfont iconjiu icon" data-item="wine"></div>
                </div>
                <div class="text" data-item="wine">杜康酒窖</div>
            </div>
            <div class="item" @click="goNext" data-item="store">
                <div class="icon_box">
                    <div class="iconfont iconfujinmendian icon" data-item="store"></div>
                </div>
                <div class="text" data-item="store">附近门店</div>
            </div>
            <div class="item" @click="goNext" data-item="activity">
                <div class="icon_box">
                    <div class="iconfont iconrili icon" data-item="activity"></div>
                </div>
                <div class="text" data-item="activity">最近活动</div>
            </div>
        </div>
        <!-- 轮播图插件 -->
        <div class="h_swiper">
            <Swiper></Swiper>
        </div>
        <!-- 底部logo -->
        <div class="index_bottom">
            <img class="logo" src="@/assets/images/card/logobttm.png" />
            <div class="title">杜康消费者俱乐部</div>
            <div class="title">DUKANGCLUB</div>
        </div>
        <prompt :model="isPrompt" :content="errorContent"></prompt>
    </div>
</template>

<script>
import wx from '@utils/wx';  
// import vconsole from "@utils/vconsole";
import Swiper from "../atom/Swiper";
import { Api, Global, Util } from "@utils/global";
import Prompt from "@components/atom/Prompt";

export default {
    name: 'HelloWorld',
    data () {
        return {
            swiperList:[
                {
                    url:"/static/img/1.jpeg",
                    id:"1"
                },
                {
                    url:"/assets/images/slider.png",
                    id:"2"
                },
                {
                    url:"/assets/images/1.jpeg",
                    id:"3"
                }
            ],
            indexdata:{},
            memberId:null,
            errorContent:"",
            isPrompt:false,
        }
    },
    components:{
        Swiper:Swiper,
        "prompt": Prompt,
        // CirCleSwiper:CirCleSwiper
    },
    mounted(){
        // let vConsole = new VConsole() // 初始化
        this.init();
    },
    methods:{
        redirect: Util.redirect,
        goNext(ev){
            console.log(ev.target.dataset.item)
            let _name = ev.target.dataset.item;
            // this.$router.push({name:_name})

            this.redirect(_name)
        },
        // 清除错误提示信息
        clearProm(){
            setTimeout(() => {
                this.isPrompt = false;
            }, 2000);
        },
        init(){
            let _code = Util.getUrlCode().code;
            // var _session = Util.storage.get('session')
            console.log(_code)
            // if(_session){
            //     this.indexdata = Util.storage.get('userInfo');
            // }else{
                if(_code){
                    Api.ajax({
                        key: "memberCenter",
                        type: "GET",
                        data:{
                            code:_code,
                            // code:'081QFPQg0H4Njt18v4Pg0olEQg0QFPQx',
                            state:'test'
                        }  
                    }).then(
                        res => {
                            if (!res) return;
                            // console.log('res',res)
                            this.indexdata = res;
                            Util.storage.set('userInfo', res);
                        },
                        res => {
                            // window.location.href = Global.getAuthorizeUrl();
                        }
                    );
                }else{
                    // 获取code
                    // console.log(Global.getAuthorizeUrl())
                    // Global.getAuthorizeUrl();
                    window.location.href = Global.getAuthorizeUrl();
                }
            // }
        },
        // 扫一扫
        getscanQRCode(){ //获取门店
            var that = this;
            var _url = window.location.href;
            // var _url = "http://guoguanglin.cn";
            // alert(_url);
            Api.ajax({
                key: "getSignature",
                type: "GET",
                data: {
                    url:_url
                }
            }).then(res => {
                // console.log(res)
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: res.appId, // 必填，公众号的唯一标识
                    timestamp: res.timestamp, // 必填，生成签名的时间戳
                    nonceStr: res.nonceStr, // 必填，生成签名的随机串
                    signature: res.signature,// 必填，调用js签名，
                    jsApiList: ['checkJsApi', 'onMenuShareTimeline',
                            'onMenuShareAppMessage', 'getLocation', 'openLocation',
                            'hideOptionMenu','scanQRCode'] // 必填，需要使用的JS接口列表，这里只写支付的
                });
                wx.ready(function(){
                    // alert('扫码准备好！')
                    // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
                    wx.checkJsApi({
                        jsApiList : [ 'getNetworkType', 'previewImage','scanQRCode' ],
                        success : function(res) {
                            // alert('检查结果',res)
                            // 以键值对的形式返回，可用的api值true，不可用为false// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                            if (res.checkResult.scanQRCode == false) {
                                alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                                return;
                            }
                        }
                    });
                    wx.hideOptionMenu();
                    wx.scanQRCode({
                        needResult: 1,
                        scanType: [ 'qrCode','barCode' ],
                        success: function (res) {
                            // alert('扫码调起返回结果',res)
                            // console.log(res)
                            // let _result = JSON.parse(res.resultStr);
                            Api.ajax({
                                key: "savePurchaseHistory",
                                type: "POST",
                                // dataType:'json',
                                data:{
                                    QRCodeInformation:res.resultStr,
                                    memberId:that.indexdata.id
                                },
                                contentType:"application/json;charset=UTF-8",
                                // data: {
                                //     productName:_result.productName,
                                //     netContent:_result.netContent,
                                //     alcoholContent:_result.alcoholContent,
                                //     batchNumber:_result.batchNumber,			
                                //     laserCode:_result.laserCode,
                                //     memberId:that.indexdata.id
                                // }
                            }).then(
                                res => {
                                    that.errorContent = "保存成功!";
                                    that.isPrompt = true;
                                    that.clearProm();
                                },res => {
                                    console.log(res.message)
                                    that.errorContent = res.message;
                                    that.isPrompt = true;
                                    that.clearProm();
                                }
                            )
                        },
                        cancel:function(res){
                            console.log('获取扫码结果失败');
                            
                            console.log(res)
                        }
                    });
                })
            },res => {
                // console.log(res)
            });
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.mine{
    display: flex;
    justify-content: space-around;
    padding: 40px 40px;
    .head{
        width:80px;
        height: 80px;
        img{
            width:80px;
            height: 80px;
            border-radius: 50%;
        }
    }
    .sign{
        width:500px;
        .top{
            font-size: 26px;
            line-height: 44px;
            color: #898989;
            .t_name{
                font-size: 26px;
                color: #fff;
                padding-right: 10px;
            }
            .iconjinka-huangguan{
                font-size: 24px;
            }
        }
        .line{
            width:500px;
            height: 4px;
            border-radius: 5px;
            background-color: #898989;
        }
        .bottom{
            display: flex;
            justify-content: flex-end;
            .speed{
                padding-right: 60px;
                font-size: 26px;
                line-height: 44px;
                color: #d7bf87;
                text-align: right;
                .sp{
                    color: #d1a641;
                }
                .iconshangsheng{
                    font-size: 28px;
                }
            }
            .dj{
                font-size: 26px;
                line-height: 44px;
                color: #d7bf87;
                text-align: right;
            }
        }
    }
}
.i_box{
    border:1px solid rgba(145, 144, 144,0.6);
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 0px 40px;
    .i_card{
        font-size: 33px;
        color: #d7bf87;
        font-weight: bold;
        padding: 20px 40px 0px;
        .sm{
            color: #d7bf87;
            font-size: 28px;
        }
    }
}

.list{
    display: flex;
    width:660px;
    margin: 50px 40px;
    justify-content: space-around;
    .item{
        // width: 220px;
        text-align: center;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        .icon_box{
            width: 100px;
            padding: 0px 20px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            .icon{
                color:#d7bf87;
            }
        }
        .text{
            font-size: 26px;
            line-height: 44px;
            color: #d7bf87;
        }
    }
}
.circle_list{
    .item{
        .icon_box{
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-image: linear-gradient(to bottom , #dfcca1, #d7bf87);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0px 12px;
            .icon{
                color:#333;
            }
        }
    }
}
.line2{
    width:100%;
    height: 80px;
    position: relative;
    top:-29px;
    .l_img{
        width: 100%;
        height: 100%;
    }
}
.h_swiper{
    width:600px;
    height: 380px;
    margin: 40px auto;

}
.index_bottom{
    width:100%;
    text-align: center;
    padding: 40px 0px;
    .logo{
        width: 140px;
        // height: 160px;
        margin: 20px 0px;
    }
    .title{
        font-size: 26px;
        line-height: 44px;
        color: #ccb484;
    }
}
</style>
